<template>
    <div>
      <div id="left">
        <i class="el-icon-s-home"></i>
        <span>课程管理系统</span>
      </div>
      <div id="right">
        <el-avatar id="userImg" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <el-dropdown id="userInfo" @command="handleCommand">
          <span class="el-dropdown-link" style="color: white;">
          {{user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
      data(){
          return{
            user:{
              name:"2011215"
            }
          }
      },
      methods: {
        handleCommand(command) {
          this.$store.dispatch('asyncUpdateToken','');
          this.$store.dispatch('asyncUpdateUser', '');
          location.reload();
        }
      }
    }
</script>

<style scoped>
#left{
  float: left;
  margin-top: 16px;
}
#left>span{
  font-size: 18px;
  margin-left: 12px;
}

#right{
  float: right;
  margin-top: 14px;
}

#userImg{
  position: relative;
  left: -10px;
}

#userInfo{
  position: relative;
  top: -15px;
}
</style>
